<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="年份" prop="beginDate">
          <a-year-picker
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择开始日期"
            class="bacClass"
          />
        </a-form-item>
        <CorporateSectorCascader
          :configCascader="configCascader"
          @changeCascader="changeCascader"
        />
        <a-form-item label="班组" prop="departmentIds">
          <a-cascader
            :options="options"
            :style="{ width: '360px' }"
            v-model="query.departmentIds"
            class="bacClass"
            multiple
            popup-container="html"
          />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div
      v-loading="loadings"
      :style="{
        height: '89%',
        width: '100%',
        padding: '10px',
        display: 'flex',
        justifyContent: 'space-between',
      }"
    >
      <div :style="{ height: '100%', width: '49%' }">
        <div :style="{ height: '35%', width: '100%' }">
          <AgGridVuesCopys
            :suppressCopyRowsToClipboard="true"
            rowSelection="multiple"
            @grid-ready="gridReady"
            :rowHeight="30"
            :headerHeight="30"
            @click="gridClicks"
            style="height: 100%"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="tableDataList"
            :columnDefs="tc"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
        </div>
        <div style="width: 100%; height: 65%">
          <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </div>
      <div :style="{ height: '100%', width: '49%' }">
        <div :style="{ height: '35%', width: '100%' }">
          <AgGridVuesCopys
            :suppressCopyRowsToClipboard="true"
            rowSelection="multiple"
            style="height: 100%"
            :rowHeight="30"
            :headerHeight="30"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="tableDataList2"
            :columnDefs="tc2"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
        </div>
        <div style="width: 100%; height: 65%">
          <div ref="myChart2" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import { slicing } from '@/utils/caseFrimAndSecRig'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)
  const loadings = ref(false)
  const myChart: any = ref()
  const myChart2: any = ref()
  const states = () => {
    return echarts.init(myChart.value!)
  }
  const states2 = () => {
    return echarts.init(myChart2.value!)
  }

  const option: any = ref({
    title: {
      text: '班组产量',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLabel: {
        inside: false,
        textStyle: {
          fontSize: '14',
        },
        padding: [5, 0, 0, -5], //文字左右定位
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '当日',
        type: 'line',
        stack: 'Total',
        data: [],
      },
    ],
  })
  const option2: any = ref({
    title: {
      text: '班组日产量',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLabel: {
        inside: false,
        textStyle: {
          fontSize: '14',
        },
        padding: [5, 0, 0, -5], //文字左右定位
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '当日',
        type: 'line',
        stack: 'Total',
        data: [],
        label: { show: true, position: 'top', distance: 10, fontSize: 16 },
        symbolSize: 15,
        lineStyle: {
          width: 8,
        },
      },
    ],
  })

  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })

  const options = ref([])

  const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
    post({ url: `org/baCompany/getDepartmentTree?companyId=${corporateId} ` }).then((res: any) => {
      if (res.code == 200) {
        options.value = res.data
      }
    })
  }

  //getlist初始化接口参数
  let query: any = reactive({
    beginDate: dayjs().format('YYYY'), //当天日期
    planOrderCode: '',
    departmentIds: [],
  })

  const tableDataList: any = ref([])
  const tableDataList2: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
  }

  const tc = [
    {
      headerName: '部门',
      field: 'department',
      width: 120,
    },
    {
      headerName: '日期',
      field: 'dateByMonth',
      width: 150,
    },
    {
      headerName: '月目标',
      field: 'goalByMonth',
      width: 150,
    },
    {
      headerName: '月产量',
      field: 'outputByMonth',
      width: 150,
    },
  ]

  const tc2 = [
    {
      headerName: '部门',
      field: 'department',
      width: 120,
    },
    {
      headerName: '日期',
      field: 'dateByDay',
      width: 110,
    },
    {
      headerName: '日目标',
      field: 'goalByDay',
      width: 160,
    },
    {
      headerName: '日产量',
      field: 'outputByDay',
      width: 160,
    },
  ]

  function selectJt() {
    loadings.value = true
    if (!query.planOrderCode) {
      Message.warning('公司必填')
      loadings.value = false
      return false
    }
    post({
      url: 'qms/report/departmentOutputReport',
      data: {
        firmId: query.planOrderCode,
        year: Number(query.beginDate),
        departmentIds: query.departmentIds,
      },
    })
      .then((res: any) => {
        if (res.code == 200) {
          tableDataList.value = res.data.tableList
          const state = states()
          option.value.xAxis.data = res.data.mouthList
          option.value.legend.data = Object.keys(res.data.lineData)
          Object.keys(res.data.lineData).forEach((o: any, i: any) => {
            option.value.series[i] = {
              name: o,
              type: 'line',
              stack: 'Total',
              data: res.data.lineData[o].map((res: any) => {
                return res.outputByMonth
              }),
              label: { show: true, position: 'top', distance: 10, fontSize: 16 },
              symbolSize: 15,
              lineStyle: {
                width: 8,
              },
            }
          })
          state.setOption(option.value)
          loadings.value = false
        } else {
          Message.error(res.message)
          loadings.value = false
        }
      })
      .finally(() => {
        loadings.value = false
      })
  }

  const getList = () => {
    selectJt()
  }

  const gridClicks = () => {
    if (gridOption.value.getSelectedRows()[0] == undefined) {
      return
    }
    loadings.value = true
    post({
      url: 'qms/report/departmentOutputReportByDay',
      data: {
        firmId: query.planOrderCode,
        date: gridOption.value.getSelectedRows()[0].dateByMonthPattern,
        departmentId: gridOption.value.getSelectedRows()[0].departmentId,
      },
    })
      .then((res: any) => {
        if (res.code == 200) {
          tableDataList2.value = res.data
          const state = states2()
          nextTick(() => {
            option2.value.legend.data = [res.data[0].department]
            option2.value.xAxis.data = res.data.map((z: any) => {
              return z.dateByDay.split('-')[1] + '/' + z.dateByDay.split('-')[2]
            })
            option2.value.series[0].name = res.data[0].department
            option2.value.series[0].data = res.data.map((b: any) => {
              return b.outputByDay
            })
            state.setOption(option2.value)
          })
          loadings.value = false
        } else {
          Message.warning(res.message)
          loadings.value = false
        }
      })
      .finally(() => {
        loadings.value = false
      })
  }
</script>
<style scoped lang="less">
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
